import React, { Component, Suspense } from 'react';
import { Route, HashRouter, Switch } from 'react-router-dom';
import routerArr from './routers';
let key_i = 0;
function descRouter(routes: any) {
  key_i++;
  return routes.map((ele: any, i: any) => {
    if (ele.children.length > 0) {
      return (
        <Route
          key={`${key_i}_${i}_${Math.random()}`}
          render={() => {
            return <ele.component>{descRouter(ele.children)}</ele.component>;
          }}
          path={ele.path}
        ></Route>
      );
    } else {
      return <Route exact path={ele.path} key={`${key_i}_${i}_${Math.random()}`} component={ele.component}></Route>;
    }
  });
}

export default class App extends Component {
  componentDidMount() {
    console.log(this);
  }
  render() {
    return (
      <Suspense
        fallback={
          <div>
            Loading....LoadingLoadingLoadingLoadingLoadingLoadingLoadingLoadingLoadingLoadingLoadingLoadingLoadingLoadingLoadingLoadingLoadingLoading
          </div>
        }
      >
        <HashRouter>
          <Switch>{descRouter(routerArr)}</Switch>
        </HashRouter>
      </Suspense>
    );
  }
}
